<include file="../header" />
<body>
<div class="wraper">
	<div class="load">
		<img class="load-bee" src="/assets/base/repair/images/load-bee.png"/>
	</div>
    <div class="top">
        <p>
			<a href="/Repairhsd/RepairhsdUserOrder/userOrderList/repairId/{BEESCRM:$repairId}" class="iconfont icon-zuo fl-left"></a>
			<span class="fl-left">订单详情</span>
			<a href="/Repairhsd/RepairhsdUserOrder/userOrderList/repairId/{BEESCRM:$repairId}" class="iconfont text-right  icon-shouye fl-right"></a>
		</p>
    </div>
    <p class="title">报修编号</p>
    <p class="list" style="margin-bottom: 10px;">{BEESCRM:$info.order_sn}</p>

	<!--评价-->
	<if condition="($info['status'] eq 4 and $info['need_pay'] eq 0) or ($info['status'] eq 5 and $info['need_pay'] eq 1)">
		<div class="dialog clearfix">
			<span class="right-big"></span>
			<span class="right-middle"></span>
			<p>
				<span class="circle green"></span>
				待评价
			</p>
			<p class="form-box">
				<textarea class="textarea" placeholder="维修很辛苦，赶紧给个五星好评吧~" id="comment"></textarea>
			</p>
			<!-- <p class="stars-list">星级
				<span class="iconfont icon-xingxing star gray-star quality js_xing_comment"></span>
				<span class="iconfont icon-xingxing star gray-star quality js_xing_comment"></span>
				<span class="iconfont icon-xingxing star gray-star quality js_xing_comment"></span>
				<span class="iconfont icon-xingxing star gray-star quality js_xing_comment"></span>
				<span id="set_message" style="color:red;"></span>

			</p> -->
			<p><span>服务星级：</span></p>
			<div class="grade">
				<p class="stars-list">响应时间
					<span class="iconfont icon-xingxing star gray-star quality"></span>
					<span class="iconfont icon-xingxing star gray-star quality"></span>
					<span class="iconfont icon-xingxing star gray-star quality"></span>
					<span class="iconfont icon-xingxing star gray-star quality"></span>
					<span class="iconfont icon-xingxing star gray-star quality"></span>
					<span class="level"></span>
				</p>
				<p class="stars-list">维修质量
					<span class="iconfont icon-xingxing star gray-star service"></span>
					<span class="iconfont icon-xingxing star gray-star service"></span>
					<span class="iconfont icon-xingxing star gray-star service"></span>
					<span class="iconfont icon-xingxing star gray-star service"></span>
					<span class="iconfont icon-xingxing star gray-star service"></span>
					<span class="level"></span>
				</p>
				<p class="stars-list">服务态度
					<span class="iconfont icon-xingxing star gray-star image"></span>
					<span class="iconfont icon-xingxing star gray-star image"></span>
					<span class="iconfont icon-xingxing star gray-star image"></span>
					<span class="iconfont icon-xingxing star gray-star image"></span>
					<span class="iconfont icon-xingxing star gray-star image"></span>
					<span class="level"></span>
				</p>
			</div>
			<a href="javascript:void(0)" class="submit" id="submit" style="background-color: green;padding: 8px;margin-top: 15px;color: #fff">提交评价</a>
		</div>
	</if>
	<!--待评价 end-->
	<!--已评价-->
	<if condition="$info['status'] eq 6  and $info['is_out'] eq 0">
		<div class="dialog clearfix">
			<span class="right-big"></span>
			<span class="right-middle"></span>
			<p>
				<span class="circle green"></span>
				已评价
				<span class="time fl-right">{BEESCRM:$info['comment_time']|date='Y-m-d H:i',###}</span>
			</p>
			<p><span>用户评价：</span> {BEESCRM:$info['comment']}</p>
			<p><span>服务星级：</span></p>
			<p>
				响应时间
				<for start="0" end="$info['quality_star']">
					<span class="iconfont icon-xingxing star small"></span>
				</for><for start="$info['quality_star']" end="5">
				<span class="iconfont icon-xingxing star small gray-star"></span>
			</for>
			</p>
			<p>维修质量
				<for start="0" end="$info['service_star']">
					<span class="iconfont icon-xingxing star small"></span>
				</for><for start="$info['service_star']" end="5">
					<span class="iconfont icon-xingxing star small gray-star"></span>
				</for>
			</p>
			<p>服务态度
				<for start="0" end="$info['image_star']">
					<span class="iconfont icon-xingxing star small"></span>
				</for><for start="$info['image_star']" end="5">
					<span class="iconfont icon-xingxing star small gray-star"></span>
				</for>
			</p>


		</div>
	</if>
	<!--已评价 end-->
	<if condition="$info['status'] eq 6  and $info['is_out'] eq 1">
		<div class="dialog clearfix">
			<span class="left-big"></span>
			<span class="left-middle"></span>
			<p>
				<span class="circle green"></span>
				外部项目
				<span class="time fl-right"></span>
			</p>
			<p><span>注:</span>此类型报修分配给外部部门，请联系：<font color='red'>{BEESCRM:$info['tel']}</p>

		</div>
	</if>

	<!--待支付-->
	<if condition="$info['status'] eq 4 and $info['order_amount'] gt 0">
		<div class="dialog clearfix">
			<span class="left-big"></span>
			<span class="left-middle"></span>
			<p>
				<span class="circle green"></span>
				待支付
				<span class="time fl-right"></span>
			</p>
			<p><span>支付方式:</span>微信支付</p>
			<p><span>支付金额:</span>{BEESCRM:$info['order_amount']}元</p>
			<p><span style="color:#E22A26">为不影响您的下次报修，请及时支付！</span></p>
			<p>
				<a href="javascript:void(0)" class="submit doPay confirm" id="doPay">去支付</a>
			</p>
		</div>
	</if>
	<!--待支付 end-->

	<!--已支付-->
	<if condition="$info['status'] egt 5 and $info['order_amount'] gt 0">
		<div class="dialog clearfix">
			<span class="left-big"></span>
			<span class="left-middle"></span>
			<p>
				<span class="circle green"></span>
				已支付
				<span class="time fl-right">{BEESCRM:$info['pay_time']|date='Y-m-d H:i',###}</span>
			</p>
			<p><span>支付方式:</span>微信支付</p>
			<p><span>支付金额:</span>{BEESCRM:$info['order_amount']}元</p>

		</div>
	</if>
	<!--已支付 end-->

	<!--已维修-->
	<if condition="$info['status'] egt 4  and $info['is_out'] eq 0">
		<div class="dialog clearfix">
			<span class="left-big"></span>
			<span class="left-middle"></span>
			<p>
				<span class="circle green"></span>
				已维修
				<span class="time fl-right">{BEESCRM:$info['finish_time']|date='Y-m-d H:i',###}</span>
			</p>
			<p><span>完工操作:</span>
				<if condition="$info['repairman_info']">
					{BEESCRM:$info['repairman_info']['real_name']} &nbsp;&nbsp;
					<span>工号：</span>{BEESCRM:$info['repairman_info']['number']}
				</if>
			</p>
			<p><span>完工说明:</span>{BEESCRM:$info['finish_remark']}</p>
		</div>
	</if>
	<!--已维修 end-->

	<!--已接单-->
	<if condition="$info['status'] egt 3 and $info['is_out'] eq 0">
		<div class="dialog clearfix">
			<span class="left-big"></span>
			<span class="left-middle"></span>
			<p>
				<span class="circle orange"></span>
				已接单
				<span class="time fl-right">{BEESCRM:$info['confirm_time']|date='Y-m-d H:i',###}</span>
			</p>
			<p><span>受理人：</span> <if condition="$info['repairman_info']['real_name']">{BEESCRM:$info['repairman_info']['real_name']|mb_substr=0,1,'utf8'}师傅</if></p>
			<p><span>受理人电话：</span> <if condition="$info['repairman_info']['mobile'] eq 0">暂无<else/><a href="tel://{BEESCRM:$info['repairman_info']['mobile']}">{BEESCRM:$info['repairman_info']['mobile']}</a></if></p>
			<p><span>工号：</span> {BEESCRM:$info['repairman_info']['number']}</p>
			<p><span>处理说明：</span> {BEESCRM:$info['send_remark']}</p>
		</div>
	</if>
	<!--已接单 end -->

	<!--已下单-->
	<div class="dialog clearfix">
		<span class="right-big"></span>
		<span class="right-middle"></span>
		<p>
			<span class="circle gray"></span>已下单<span class="time fl-right">{BEESCRM:$info.create_time|date='Y-m-d H:i',###}</span>
		</p>
		<p><span>报修人：</span> {BEESCRM:$info['real_name']|mb_substr=0,1,'utf8'}某某</p>
		<p><span>联系电话：</span> <a href="tel://{BEESCRM:$info.mobile}">{BEESCRM:$info.mobile}</a></p>
		<p><span>报修区域：</span> {BEESCRM:$info.community_name}</p>
		<p><span>报修地址：</span> {BEESCRM:$info.building_name}{BEESCRM:$info.room_name} {BEESCRM:$info.detail_address}</p>
		<p><span>报修内容：</span> {BEESCRM:$info.content}</p>
		<P><span>报修项目：</span>{BEESCRM:$info.project_name}　　{BEESCRM:$info.project_child_name}</P>

		<if condition="$info['order_img']">
			<volist name="info['order_img']" id="vo">
				<if condition="$vo['type'] eq 0"><img class="picture fl-left" src="{BEESCRM:$vo.url}"/></if>
			</volist>
		</if>
	</div>
	<!--已下单 end-->
</div>

<include file="../commonJS" />
<script type="text/javascript" src="/assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.fileupload.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.iframe-transport.js"></script>
<script src="/assets/base/repair/js/fastclick.min.js"></script>
<script>
	$(function(){
		//点击灰色星星
		$(document).on('click','.js_xing_comment.gray-star',function () {
			$(this).prevAll().removeClass('gray-star');
			$(this).removeClass('gray-star');
			//提示信息
			setMessage();
		});

		//点击黄色星星
		$(document).on('click','.js_xing_comment',function () {
			$(this).nextAll().addClass('gray-star');
			setMessage();
		});

		function setMessage(){
			var star_length = $('.quality:not(.gray-star)').length;
			if(star_length == 1){
				$('#set_message').text('童鞋，维修人员很辛苦，忍心给差评吗？');
			}else if(star_length == 2){
				$('#set_message').text('一般般');
			}else if(star_length == 3){
				$('#set_message').text('比较满意！');
			}else if(star_length == 4){
				$('#set_message').text('维修的很完美！');
			}
		}

		

		//提交评价
		$(document).on('click','#submit',function(){

			if($('.quality:not(.gray-star)').length <= 0 || $('.service:not(.gray-star)').length <= 0 || $('.image:not(.gray-star)').length <= 0) {
				$.alert('error','请完成所有评价，再提交~');return false;
			}
			var comment = $.trim($('#comment').val());
			if($('.quality:not(.gray-star)').length == 1 || $('.quality:not(.gray-star)').length == 4){
				if(comment == ''){
					$.alert('error','请填写评论内容');
					return false;
				}
			}
			$.ajax({
				type:'post',
				url:"/Repairhsd/repairhsdUserOrder/ajaxCommentOrder/repairId/{BEESCRM:$repairId}",
				dataType:'json',
				data:{
					'order_id':"{BEESCRM:$info.order_id}",
					'comment':comment,
					'quality_star':$('.quality:not(.gray-star)').length,
					'service_star':$('.service:not(.gray-star)').length,
					'image_star':$('.image:not(.gray-star)').length
				},

				success:function(data){
					if(data.status=='S'){
						$.alert('success',data.message);
						setTimeout(function(){
							var url = location.href;
							if(url.indexOf('?')){
								url = url+'&t='+Math.random()
							}else{
								url = url+'/t='+Math.random()
							}
							location.href=url;
						},2000);
					}else{
						$.alert('error',data.message);
					}
				},
				error:function(){
					$.alert('error','网络错误，请稍后再试');
				}
			});
		});

		/*支付*/
		$('#doPay').on('click',function(){
			$.ajax({
				url:"{BEESCRM::U('Repairhsd/RepairhsdUserOrder/doPay',array('repairId'=>$repairId))}",
				type:"post",
				data:{'order_id':"{BEESCRM:$info.order_id}"},
				dataType:'json',
				success:function(data){
					if(data.status == 'F'){
						$.alert('error', data.message);return ;
					}else{
						var id = data.data.order_id;
						var wxpay = $.parseJSON(data.wxpay);
						pay(wxpay, id);
					}
				}
			})
		})

		//微支付
		 function pay(wxpay, id){
			if (typeof WeixinJSBridge == "undefined"){
				if( document.addEventListener ){
					document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
				}else if (document.attachEvent){
					document.attachEvent('WeixinJSBridgeReady', jsApiCall);
					document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
				}
			}else{
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest',
					 wxpay,
					function(res){
						WeixinJSBridge.log(res.err_msg);
						
						if(res.err_msg == "get_brand_wcpay_request:ok"){
							location.reload();
						}else if(res.err_msg == "get_brand_wcpay_request:cancel"){
							$.alert('error','付款已取消');
							return false;
						}else{
							//alert(res.err_code+res.err_desc+res.err_msg);
//							$.alert('error','调用微支付失败');
							$.alert('error',res.err_msg);
							return false;
						}
					}
				);
			}
		}
    });

	//这个是调用微信图片浏览器的函数
	function imagePreview(curSrc,srcList) {
		//这个检测是否参数为空
		if(!curSrc || !srcList || srcList.length == 0) {
			return;
		}
		//这个使用了微信浏览器提供的JsAPI 调用微信图片浏览器
		WeixinJSBridge.invoke('imagePreview', {
			'current' : curSrc,
			'urls' : srcList
		});
	};

	(function($){
		//下面是获取当前页面所有的img的src 转成数组 并且 转换成json格式
		var aa=[];
		var i=0;
		var src=[];
		var json=null;
		aa=$('img');
		for (i=0;i<aa.length;i++){
			src[i]=aa[i].src;    //把所有的src存到数组里
		}
		var srcList=arrayToJson(src); //转换成json并赋值给srcList
		//下面是点击图片的时候获取当前第几个图片并且启用咱们做的调用微信图片浏览器的函数
		$('img').click(function(){
			var index = $('img').index(this);
			imagePreview(src[index],src);
		});

	})(jQuery);

	//下面这个函数用来转换数组到json格式
	function arrayToJson(o) {
		var r = [];
		if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
		if (typeof o == "object") {
			if (!o.sort) {
				for (var i in o)
					r.push(i + ":" + arrayToJson(o[i]));
				if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
					r.push("toString:" + o.toString.toString());
				}
				r = "{" + r.join() + "}";
			} else {
				for (var i = 0; i < o.length; i++) {
					r.push(arrayToJson(o[i]));
				}
				r = "[" + r.join() + "]";
			}
			return r;
		}
		return o.toString();
	}

	$('.stars-list').on('click','.star',function(){
		$(this).removeClass('gray-star');
		$(this).prevAll('.star').removeClass('gray-star');
		$(this).nextAll('.star').addClass('gray-star');
		var num = $(this).parent().find('.gray-star').length;
		if( num >= 3){
			$(this).siblings('.level').html('差评');
		}else if( num < 2){
			$(this).siblings('.level').html('好评');
		}else{
			$(this).siblings('.level').html('中评');
		}
	});
</script>
</body>

</html>
